<template>
  <div class="demo">
    <div class="demo-title">倒计时组件</div>
    <div class="demo-content">
      <Row :gutter="16">
        <Col :span="12">
          <Statistic.Countdown :value="deadline" style="margin-right: 50px" @finish="onFinish">
            <template #title>
              <span>Countdown</span>
              <Tooltip placement="right">
                <template #title>
                  <span>hurry up!</span>
                </template>
                <QuestionCircleTwoTone style="margin-left: 5px" />
              </Tooltip>
            </template>
          </Statistic.Countdown>
        </Col>
        <Col :span="24" style="margin-top: 32px">
          <Statistic.Countdown
            title="Million Seconds countdown"
            :value="deadline"
            format="HH:mm:ss:SSS"
            style="margin-right: 50px"
          >
            <template #prefix>
              <span>There's only</span>
            </template>
            <template #suffix>
              <span>left for the end.</span>
            </template>
          </Statistic.Countdown>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { QuestionCircleTwoTone } from '@ant-design/icons-vue';
  import { Row, Col } from '@sscd/grid';
  import Tooltip from '@sscd/tooltip';
  import Statistic from '@sscd/statistic';
  const onFinish = () => console.log('finished!');
  const deadline = Date.now() + 1000 * 60 * 60 * 20 * 2;
</script>
